<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Mednalytics</title>
    <!-- Iconic Fonts -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="../../vendors/iconic-fonts/font-awesome/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/flat-icons/flaticon.css">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins.css">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins-colors.css">
    <!-- jQuery UI -->
    <link href="../../assets/css/jquery-ui.min.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Page Specific Css (Datatables.css) -->
    <link href="../../assets/css/datatables.min.css" rel="stylesheet">
    <!-- Page Specific CSS (Slick Slider.css) -->
    <link href="../../assets/css/slick.css" rel="stylesheet">
    <!-- Mednalytics styles -->
    <link href="../../assets/css/style.css" rel="stylesheet">
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="../../favicon.ico">
</head>
<body class="ms-body ms-aside-left-open ms-primary-theme ms-has-quickbar">
<!-- Setting Panel -->
<script src="../../assets/reuseCode/top.js"></script>
<!-- Body Content Wrapper -->
<div class="ms-content-wrapper">
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb pl-0">
                    <li class="breadcrumb-item"><a href="#"><i class="material-icons">home</i>首页</a></li>
                    <li class="breadcrumb-item"><a href="#">部门</a></li>
                    <li class="breadcrumb-item active" aria-current="page">部门列表</li>
                </ol>
            </nav>
        </div>
        <div class="col-xl-6 col-lg-12 col-md-12">
            <div class="ms-panel">
                <div class="ms-panel-header">
                    <h6>所有部门</h6>
                </div>
                <div class="ms-panel-body">
                    <canvas  id="pie-chart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-6 col-lg-12 col-md-12">
            <div class="ms-panel">
                <div class="ms-panel-header">
                    <h6>员工</h6>
                </div>
                <div class="ms-panel-body">
                    <canvas  id="bar-chart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-12">
            <div class="ms-panel">
                <div class="ms-panel-header  ms-panel-custome">
                    <h6>部门列表</h6>
                    <a href="add-department.html" class="ms-text-primary">添加部门</a>
                </div>
                <div class="ms-panel-body">
                    <div class="table-responsive">
                        <!--                  <table id="data-table5" class="table w-100 thead-primary"></table>-->
                        <!--=============-->
                        <div class="ms-panel-body">
                            <div class="table-responsive">
                                <div id="data-table5_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <table id="data-table5"
                                                   class="table w-100 thead-primary dataTable no-footer" role="grid"
                                                   aria-describedby="data-table5_info" style="width: 1543px;">
                                                <thead>
                                                <tr role="row">
                                                    <th class="sorting_asc" tabindex="0" aria-controls="data-table5"
                                                        rowspan="1" colspan="1"
                                                        aria-sort="ascending"
                                                        aria-label="部门编号: activate to sort column descending"
                                                        style="width: 214px;">部门编号
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="data-table5"
                                                        rowspan="1" colspan="1"
                                                        aria-label="部门名称: activate to sort column ascending"
                                                        style="width: 214px;">部门名称
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="data-table5"
                                                        rowspan="1" colspan="1"
                                                        aria-label="科室: activate to sort column ascending"
                                                        style="width: 363px;">科室
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="data-table5"
                                                        rowspan="1" colspan="1"
                                                        aria-label="负责人: activate to sort column ascending"
                                                        style="width: 178px;">负责人
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="data-table5"
                                                        rowspan="1" colspan="1"
                                                        aria-label="状态: activate to sort column ascending"
                                                        style="width: 171px;">状态
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="data-table5"
                                                        rowspan="1" colspan="1"
                                                        aria-label="操作: activate to sort column ascending"
                                                        style="width: 150px;">操作
                                                    </th>
                                                </tr>
                                                </thead>

                                                <tbody id="dl">
                                                <!--====================================================-->
                                                <tr role="row" class="odd" v-for="department in departments"
                                                    v-if="department.deleteStatus == 0">
                                                    <td class="sorting_1" v-text="department.departmentId">1</td>
                                                    <td v-text="department.name">Denise</td>
                                                    <td v-text="department.officeName">Dentists</td>
                                                    <td v-text="department.chairman">Daniel</td>
                                                    <td>
                                                        <span id="green_status" class="badge badge-outline-success"
                                                              v-if="department.status == 1">运转正常</span><!--green-->
                                                        <span id="red_status" class="badge badge-outline-danger"
                                                              v-if="department.status == 0">未运转</span><!--red-->
                                                    </td>
                                                    <td>
                                                        <a href="#mymodal" data-toggle="modal" class="text-white">
                                                            <i class="fas fa-pencil-alt ms-text-primary"></i><!--修改-->
                                                        </a>
                                                        <a href="#" @click="deleteDepartment(department.id)">
                                                            <i class="far fa-trash-alt ms-text-danger"></i><!--删除-->
                                                        </a>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--============-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</main>

<div id="mymodal" tabindex="-1" role="dialog" class="modal fade" style="padding-right: 17px;">
    <div class="modal-dialog ms-modal-dialog-width">
        <div class="modal-content ms-modal-content-width">
            <div class="modal-header  ms-modal-header-radius-0"><h4 class="modal-title text-white">修改部门</h4>
                <button type="button" data-dismiss="modal" aria-hidden="true" class="close text-white">x</button>
            </div>
            <div class="modal-body p-0 text-left">
                <div class="col-xl-12 col-md-12">
                    <div class="ms-panel ms-panel-bshadow-none">
                        <div class="ms-panel-header"><h6>部门信息:</h6></div>
                        <div class="ms-panel">
                            <div class="ms-panel-body">
                                <form class="needs-validation">
                                    <div class="form-row">
                                        <div class="col-md-3 mb-3"><label>部门名称</label>
                                            <div class="input-group"><input type="text" id="name" value="终极一班"
                                                                            class="form-control info"></div>
                                        </div>
                                        <div class="col-md-3 mb-3"><label>科室名称</label>
                                            <div class="input-group"><label><input type="text" id="age" value="25"
                                                                                   class="form-control info"></label>
                                            </div>
                                        </div>

                                        <div class="col-md-3 mb-3"><label>状态</label>
                                            <ul class="ms-list d-flex">
                                                <li class="ms-list-item pl-0"><label class="ms-checkbox-wrap"><input
                                                        type="radio" name="sex" value="男" checked="checked"> <i
                                                        class="ms-checkbox-check"></i></label> <span> 运转正常 </span></li>
                                                <li class="ms-list-item"><label class="ms-checkbox-wrap"><input
                                                        type="radio" name="sex" value="女"> <i
                                                        class="ms-checkbox-check"></i></label> <span> 未运转 </span></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-md-3 mb-3"><label>负责人</label>
                                            <div class="input-group"><input type="text" id="phone" value="18709422435" class="form-control info"></div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div><span><button type="button"
                                                           class="btn btn-warning mt-4 d-inline w-20">重新填写</button> <button
                                                type="submit" id="save"
                                                class="btn btn-primary mt-4 d-inline w-20">确认修改</button></span></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Reminder Modal -->
<script src="../../assets/reuseCode/reminderModal.js"></script>
<!-- Notes Modal -->
<script src="../../assets/reuseCode/notesModal.js"></script>
<!--modal 3-->
<script src="../../assets/reuseCode/modal.js"></script>
<!-- SCRIPTS -->
<!-- Global Required Scripts Start -->
<script src="../../assets/js/jquery-3.3.1.min.js"></script>
<script src="../../assets/js/popper.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/perfect-scrollbar.js"></script>
<script src="../../assets/js/jquery-ui.min.js"></script>
<!-- Global Required Scripts End -->
<!-- Page Specific Scripts Start -->
<script src="../../assets/js/slick.min.js"></script>
<script src="../../assets/js/moment.js"></script>
<script src="../../assets/js/jquery.webticker.min.js"></script>
<script src="../../assets/js/Chart.bundle.min.js"></script>
<script src="../../assets/js/department.js"></script>
<!-- Page Specific Scripts Finish -->
<!-- Mednalytics core JavaScript -->
<script src="../../assets/js/framework.js"></script>
<!-- Settings -->
<script src="../../assets/js/settings.js"></script>
<script src="../../assets/reuseCode/department-list.js"></script>
</body>

</html>
